<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			li:hover {
				background: gray;
			}
			
			.gray {
				background: gray;
			}
		</style>
	</head>

	<body>

	<pre>
当input获取焦点，
1、弹出建议条目。 OK
2、键盘上下选取   OK
3、回车可以开始搜索 OK 
4、录入你想要的、展示：包含你搜索词的信息几条。 ok
5、热搜词：两个超级链接
获取焦点消失，失去焦点出现，超级链接。
渐变效果..

<pre>
		美观性：
		<form action="a.php">
			<input autocomplete="off" type="text" name="str" />
			<ul id="mydata">

			</ul>
		</form>

		<script>
			var myinput = document.querySelector("input")
			var mydata = document.querySelector("#mydata")
			var data = ['小米6', '小米5', '红米3', '手环', '手铐', '移动电影']
			var lis = "";

			function showList() {
				var str = ""
				for(var i = 0; i < data.length; i++) {
					str += "<li>" + data[i] + "</li>";
				}

				mydata.innerHTML = str;

				//给li绑定单击事件
				lis = document.querySelectorAll("#mydata li");
				console.log(lis)
				for(var i = 0; i < lis.length; i++) {
					lis[i].onclick = function() {
						myinput.value = this.innerText;
						//myinput.parentNode.submit(); 表单自动提交

					}
				}

			}

			myinput.onfocus = showList;

			//有能力获取键盘事件？
			var k = -1;
			myinput.onkeydown = function(ev) {

				if(ev.keyCode == 40) {
					++k;

					k = k >= lis.length - 1 ? lis.length - 1 : k;
					//去掉非当前的背景class.
					(k >= 1) ? (lis[k - 1].className = "") : null
					if(k == 0) {
						lis[lis.length - 1].className = ""
					}
					//给当前li添加背景
					lis[k].className = "gray";
					myinput.value = lis[k].innerText;

				} else if(ev.keyCode == 38) {
					k = (k <= 0) ? 0 : --k;

					if(k < (lis.length - 1)) {
						lis[k + 1].className = "";
					}

					lis[k].className = "gray";
					myinput.value = lis[k].innerText;

				}

			}

			//获取用户输入显示相关内容
			myinput.oninput = showList2;

			function showList2(ev) {
				//获取用户输入内容
				var inputValue = this.value;

				var str = ""
				for(var i = 0; i < data.length; i++) {
					if(data[i].indexOf(inputValue) > -1) {
						str += "<li>" + data[i] + "</li>";
					}
				}
				mydata.innerHTML = str;

				//给li绑定单击事件
				lis = document.querySelectorAll("#mydata li");
				console.log(lis)
				for(var i = 0; i < lis.length; i++) {
					lis[i].onclick = function() {
						myinput.value = this.innerText;

					}
				}

			}
		</script>

	</body>

</html>